<template>
  <ChartBox width="100%" height="100%" :title="this.$window.title.title7">
    <div class="tab">
      <ul class="tab_nav">
        <li
          v-for="(item, index) in tabdata"
          :key="index"
          @click="activeClass(index)"
          :class="{ active: index === activeIndex }"
        >
          {{ item }}
        </li>
      </ul>
      <div class="tab_cont" ref="tabnav">
        <div class="item" :class="{activeItem : activeIndex == 0}">
          <dv-scroll-board
            :config="config1"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="item" :class="{activeItem : activeIndex == 1}">
          <dv-scroll-board
            :config="config2"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="item" :class="{activeItem : activeIndex == 2}">
          <dv-scroll-board
            :config="config3"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="item" :class="{activeItem : activeIndex == 3}">
          <dv-scroll-board
            :config="config4"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="item" :class="{activeItem : activeIndex == 4}">
          <dv-scroll-board
            :config="config5"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="item" :class="{activeItem : activeIndex == 5}">
          <dv-scroll-board
            :config="config6"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="item" :class="{activeItem : activeIndex == 6}">
          <dv-scroll-board
            :config="config7"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="item" :class="{activeItem : activeIndex == 7}">
          <dv-scroll-board
            :config="config8"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
    </div>
  </ChartBox>
</template>

<script>
import ChartBox from "@/views/components/ChartBoxLong.vue";
// import ScrollBoard from '@/components/ScrollBoard.vue';

export default {
  components: {
    ChartBox,
    // ScrollBoard,
  },
  data() {
    return {
      isActive: false,
      activeIndex: 0,
      scorlldatav: [],
      tabdata: [],
      config1: {
        header: this.$window.sevenheaderData,
        data: this.$window.scorlldata1,
      },
       config2: {
        header: this.$window.sevenheaderData,
        data: this.$window.scorlldata2,
      },
       config3: {
        header: this.$window.sevenheaderData,
        data: this.$window.scorlldata3,
      },
       config4: {
        header: this.$window.sevenheaderData,
        data: this.$window.scorlldata4,
      },
       config5: {
        header: this.$window.sevenheaderData,
        data: this.$window.scorlldata5,
      },
       config6: {
        header: this.$window.sevenheaderData,
        data: this.$window.scorlldata6,
      },
       config7: {
        header: this.$window.sevenheaderData,
        data: this.$window.scorlldata7,
      },
       config8: {
        header: this.$window.sevenheaderData,
        data: this.$window.scorlldata8,
      },
    };
  },
  created() {
    this.tabdata = this.$window.tabdata;
  },
  methods: {
    activeClass(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped lang='scss'>
@import "../../../assets/css/parkview.scss";
.tab {
  margin-top: 2%;
  margin-left: 5%;
  width: 90%;
  height: 85%;
  // background-color: pink;
  .tab_nav {
    list-style: none;
    width: 100%;
    height: 15%;
    background-color: #364368;
    display: flex;
    justify-content: space-around;
    li {
      flex: 1;
      height: 100%;
      // background-color: yellow;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 8rem;
      color: #fff;
    }
    .activeClass {
      background-color: blue;
    }
  }
  .tab_cont {
    position: relative;
    margin-top: -1%;
    width: 100%;
    height: 80%;
    // background-color: rgb(148, 123, 128);
    .item {
      width: 100%;
      height: 100%;
      overflow: hidden;
      // background-color: orange;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      // background-color: palevioletred;
    }
  }
}
.active {
  background-color: #2ff3f1;
}
.activeItem{
  opacity: 1!important;
}
.scroll-board {
  width: 100%;
  height: 100%;
  // background-color: pink;
}
::v-deep .el-table {
  width: 100%;
  height: 100%;
  top:5%
}
::v-deep.el-table td, .el-table th.is-leaf {
        border: none;
      }
::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #2ff3f1;
}







::v-deep .dv-scroll-board .header {
  margin-top:1%;
  background-color: #238cc0 !important;
  font-size: 10rem;
  height: 20rem;
  line-height: 20rem;
}
::v-deep .row-item {
  // height: 16rem !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  font-size: 10rem;
}
::v-deep .row-item .ceil {
  font-size: 10rem;
}
</style>